{% extends "base.html" %}
{% from "_icones.html" import icone %}
{% block titulo %}Estoque{% endblock %}
{% block conteudo %}
<div class="topo">
  <div><h1>Estoque</h1><p>As notas autorizadas em <b>produção</b> movimentam o estoque sozinhas (notas de homologação são só teste e não mexem no estoque).
    Compras registradas em <a href="{{ url_for('compras') }}">Entradas / compras</a> dão entrada.</p></div>
  <div class="acoes">
    <a class="btn" href="{{ url_for('estoque_exportar') }}">{{ icone('download') }} Exportar planilha</a>
    <button class="btn prim" type="button" onclick="abrirMovimento()">{{ icone('mais') }} Lançar movimento</button>
  </div>
</div>

<div class="grade g3">
  <div class="cartao kpi"><div class="rot">Produtos controlados</div><div class="val">{{ produtos|length }}</div><div class="sub">{{ 'no filtro atual' if q or grupo or filtro else 'com controle de estoque' }}</div></div>
  <div class="cartao kpi"><div class="rot">Valor em estoque (custo médio)</div><div class="val">{{ total_valor|moeda }}</div><div class="sub">saldo positivo × custo médio</div></div>
  <div class="cartao kpi"><div class="rot">Abaixo do mínimo ou negativo</div><div class="val" {% if baixos %}style="color:var(--erro)"{% endif %}>{{ baixos }}</div>
    <div class="sub"><a href="{{ url_for('estoque', filtro='baixo') }}">ver produtos</a></div></div>
</div>

<div class="cartao" style="margin-top:18px">
  <div class="cab">
    <form class="busca" method="get" style="display:flex;gap:8px;flex-wrap:wrap;flex:1">
      <input name="q" value="{{ q }}" placeholder="Buscar produto" style="max-width:260px">
      <select name="grupo" style="max-width:200px"><option value="">Todos os grupos</option>
        {% for g in grupos %}<option value="{{ g.id }}" {{ 'selected' if grupo == g.id|string }}>{{ g.nome }}</option>{% endfor %}</select>
      <select name="filtro" style="max-width:220px">
        <option value="">Todos</option><option value="com" {{ 'selected' if filtro == 'com' }}>Com saldo</option>
        <option value="baixo" {{ 'selected' if filtro == 'baixo' }}>Abaixo do mínimo / negativo</option></select>
      <button class="btn">{{ icone('busca') }} Filtrar</button>
    </form>
  </div>
  {% if produtos %}
  <div class="tabela-wrap"><table class="tab">
    <thead><tr><th>Produto</th><th>Grupo</th><th class="direita">Saldo</th><th class="direita">Mínimo</th>
      <th class="direita">Custo médio</th><th class="direita">Valor</th><th></th></tr></thead>
    <tbody>{% for p in produtos %}
      <tr>
        <td><a href="{{ url_for('estoque_produto', pid=p.id) }}"><b>{{ p.descricao }}</b></a><div class="suave peq">{{ p.codigo }}</div></td>
        <td class="peq">{{ p.grupo_nome or '—' }}</td>
        <td class="direita nowrap"><b {% if p.negativo %}style="color:var(--erro)"{% elif p.baixo %}style="color:var(--alerta)"{% endif %}>{{ p.saldo|qtd }}</b> <span class="peq suave">{{ p.unidade }}</span>
          {% if p.negativo %}<div><span class="selo erro">negativo</span></div>{% elif p.baixo %}<div><span class="selo alerta">abaixo do mínimo</span></div>{% endif %}</td>
        <td class="direita">{{ p.minimo|qtd if p.minimo is not none else '—' }}</td>
        <td class="direita nowrap">{{ p.custo_medio|moeda }}</td>
        <td class="direita nowrap">{{ p.valor|moeda }}</td>
        <td><div class="acoes-linha">
          <button class="btn peq" type="button" onclick='abrirMovimento({{ {"id": p.id, "descricao": p.descricao, "unidade": p.unidade}|tojson }})'>Lançar</button>
          <a class="btn peq" href="{{ url_for('estoque_produto', pid=p.id) }}">Movimentos</a></div></td>
      </tr>
    {% endfor %}</tbody></table></div>
  {% else %}
  <div class="vazio">{{ icone('caixa') }}<div>{{ 'Nenhum produto neste filtro.' if q or grupo or filtro else 'Cadastre produtos para controlar o estoque.' }}</div></div>
  {% endif %}
</div>
{% include "_dlg_movimento.html" %}
{% endblock %}